<template>
  <Drawer :maskClosable="true" :closable="true" width="100%" v-model:visible="visible" title="镜像管理">
    <div class="md:flex">
      <Col span="5" style="margin-left: 93%" class="md:my-5">
        <span v-per="'addImage'">
          <Button style="background-color: cornflowerblue; color: white" @click="handleCreate">新增镜像</Button></span
        >
      </Col>
    </div>

    <Table
      ref="tableRef"
      size="large"
      :columns="mirrorColumns"
      :data-source="dataSource"
      :pagination="pagination"
      @change="handleTableChange"
      bordered
      class="main-table"
      :loading="loading"
      :scroll="scroll"
      sticky
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <span>
            <Divider type="vertical" v-if="false" />
            <span v-per="'editImage'"> <a @click="handleEdit(record)">编辑</a></span>
            <Divider type="vertical" v-if="record.preferred == false" />
            <Popconfirm title="是否确认删除？" @confirm="onDelete(record.id)" ok-text="确定" cancel-text="取消">
              <span v-per="'deleteImage'"><a v-if="record.preferred == false">删除</a></span>
            </Popconfirm>
          </span>
        </template>
      </template>
    </Table>
  </Drawer>
  <BasicModal ref="mirrorModalRef" @success="successHandler"></BasicModal>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { Divider, TableProps, Col, Popconfirm, message } from 'ant-design-vue';
import { mirrorColumns } from '/@/views/system-mgmt/app-mgmt/drawer/data';
import { Button, Table, Drawer } from 'ant-design-vue';
import BasicModal from '/@/views/system-mgmt/app-mgmt/modal/BasicModal.vue';
import { getImageByAppComp } from '/@/api/system-mgmt/app-mgmt/image';
import { deleteMirror } from '/@/api/system-mgmt/app-mgmt/app';
import { ApiResultEnum } from '/@/enums/resEnum';

const scroll = ref<undefined | object>(undefined);
let current = ref(1);
let size = ref(10);
const total = ref(0);

const mirrorModalRef = ref('mirrorModalRef');
const tableRef = ref();
let model = ref({});
const params = computed(() => {
  return {
    current: current.value,
    model: model.value,
    size: size.value,
  };
});

const appId = ref();
const visible = ref(false);
const dataSource = ref([]);

const pagination = computed(() => ({
  showSizeChanger: true,

  total: total.value,
  current: current.value,
  size: size.value,
  showTotal: (total) => {
    return `共 ${total} 条`;
  },
}));

const openDrawer = async (id: string) => {
  params.value.model.appId = id;
  appId.value = id;
  visible.value = true;
  getImageByAppComp(params.value).then((res) => {
    let tempData = [];
    res?.forEach((item) => {
      let tempItem: any;
      tempItem = item.image;
      tempItem.componentName = item.componentName;
      tempData.push(tempItem);
    });
    dataSource.value = tempData;
    total.value = res.length;
  });
};

const handleEdit = (record: Recordable) => {
  mirrorModalRef.value.openModal('mirror', appId.value, record, total.value);
};

const handleCreate = () => {
  mirrorModalRef.value.openModal('mirror', appId.value, undefined, total.value);
};

const closeDrawer = () => {
  visible.value = false;
};

const successHandler = () => {
  if (Number(size) > 10) {
    scroll.value = { x: 'max-content', y: 500 };
  }
  getImageByAppComp(params.value).then((res) => {
    let tempData = [];
    res?.forEach((item) => {
      let tempItem: any;
      tempItem = item.image;
      tempItem.componentName = item.componentName;
      tempData.push(tempItem);
    });
    dataSource.value = tempData;
    total.value = res.length;
  });
};

const onDelete = async (id: string) => {
  await deleteMirror(id).then(() => {
    message.success(ApiResultEnum.DELETE_SUCCESS);
    successHandler();
  });
};

const handleTableChange: TableProps['onChange'] = (pag) => {
  current.value = pag.current;
  size.value = pag.pageSize;
  if (Number(size) > 10) {
    scroll.value = { x: 'max-content', y: 500 };
  }
  getImageByAppComp(params.value).then((res) => {
    let tempData = [];
    res?.forEach((item) => {
      let tempItem: any;
      tempItem = item.image;
      tempItem.componentName = item.componentName;
      tempData.push(tempItem);
    });
    dataSource.value = tempData;
    total.value = res.length;
    current.value = pag.current;
    size.value = pag.pageSize;
  });
};

defineExpose({ openDrawer, closeDrawer });
</script>
